<template>
    <div id="tap" class="demo">
        <button @click="handleClick(btn)" 
        :class="['tab-button',{active:btn.enName===activeBtn}]" 
        v-for="(btn,index) in buttons" 
        :key="index">{{btn.cnName}}
        </button>
        <div class="tab" :is="componentName"></div>
    </div>
</template>
<script>
    import charge from "@/components/Tab/Charge"
    import email from "@/components/Tab/Email"
    import home from "@/components/Tab/Home"
    import mine from "@/components/Tab/Mine"

    export default {
        data(){
            return {
                //定一个三方数据，当点击按钮的时候，将这个数据的值改成按钮的英文名
                //比如：当点击充值按钮的时候，让activeBtn变成charge
                activeBtn:"email",
                buttons:[
                    {
                       enName:"email" ,
                       cnName:"邮箱"
                    },
                    {
                       enName:"home" ,
                       cnName:"主页"
                    },
                    {
                       enName:"charge" ,
                       cnName:"充值"
                    },
                    {
                       enName:"mine" ,
                       cnName:"个人中心"
                    },
                ],
            }
        },
        computed:{
            componentName(){
                return "tab-" + this.activeBtn
            }
        },
        components:{
            "tab-charge":charge,
            "tab-email":email,
            "tab-home":home,
            "tab-mine":mine,
        },
        methods:{
            handleClick(btn){
                console.log(btn);
                this.activeBtn = btn.enName;
            }
        }
    }

</script>
<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>